<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script> -->
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { SlateElement } from "@wangeditor/editor";

// const E = window.wangEditor
// //改变语言
// const LANG = location.href.indexOf("lang=en") > 0 ? "en" : "zh-CN";
// E.i18nChangeLanguage(LANG);

const editorConfig = { MENU_CONF: {} };
// editorConfig.MENU_CONF["insertImage"] = {
//   onInsertedImage(imageNode) {
//     if (imageNode == null) return;

//     const { src, alt, url, href } = imageNode;
//     console.log("inserted image", src, alt, url, href);
//   },
//   checkImage: customCheckImageFn, // 也支持 async 函数
//   parseImageSrc: customParseImageSrc, // 也支持 async 函数
// };

editorConfig.MENU_CONF["uploadImage"] = {
  server: 'http://localhost:8020/user',
  timeout: 5 * 1000, // 5s
  fieldName: "custom-fileName",
  meta: { token: "xxx", a: 100 },
  metaWithUrl: true, // 将参数连接到url
  headers: { Accept: "text/x-json" },

  maxFileSize: 10 * 1024 * 1024, // 10M
  base64LimitSize: 5 * 1024, // 如果文件大小小于5kb，则插入base64格式

  //再上传之前
  onBeforeUpload(file) {
    console.log("onBeforeUpload", file);

    return file; //将上传此文件  false:阻止上传
  },

  onProgress(progress) {
    console.log("onProgress", progress);
  },
  onSuccess(file, res) {
    console.log("onSuccess", file, res);
  },
  onFailed(file, res) {
    alert(res.message);
    console.log("onFailed", file, res);
  },
  onError(file, err, res) {
    alert(err.message);
    console.error("onError", file, err, res);
  },
};
// 自定义校验图片
function customCheckImageFn(src, alt, url) {
  // JS 语法
  if (!src) {
    return;
  }
  if (src.indexOf("http") !== 0) {
    return "图片网址必须以 http/https 开头";
  }
  return true;

  // 返回值有三种选择：
  // 1. 返回 true ，说明检查通过，编辑器将正常插入图片
  // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
  // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
}
// 转换图片链接
function customParseImageSrc(src) {
  // JS 语法
  if (src.indexOf("http") !== 0) {
    return `http://${src}`;
  }
  return src;
}

export default Vue.extend({
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null, //编辑器的实例 执行api会用
      html: "<p>hello</p>",
      toolbarConfig: {}, //工具栏配置
      editorConfig: { placeholder: "请输入内容..." }, //编译器配置
      mode: "default", //default or 'simple'
    };
  },
  methods: {
    onCreated(editor) {
      //onCreated 要放在 Editor组件里
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },

    //onChange要放在 Editor组件里
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      console.log("getText", editor.getText()); //获取当前编辑器的纯文本内容
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      //   this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    }, 1500);
  },
  beforeDestroy() {
    //销毁编译器
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
});
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
